<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="flex flex-wrap justify-between job-cont">
      <div
        class="job-item"
        v-for="item in joblist"
        :key="item.objectId"
        @click="handleDetail(item.objectId)"
      >
        <div class="flex justify-between align-center">
          <div class="brand flex align-center">
            <img :src="item.brandLogo" alt="" />
            {{ item.brandName }}
          </div>
          <i class="iconfont icon-bookmark-o"></i>
        </div>
        <h2 class="fs-28">{{ item.jobName }}</h2>
        <p class="fs-22 loc">{{ item.cityName }} · {{ item.areaDistrict }}</p>
        <div class="fs-22 flex align-center">
          <i class="iconfont icon-a-1"></i>
          {{ item.salaryDesc }}
        </div>
      </div>
    </div>
  </van-list>
</template>

<script>
import { stuGet, jobGet } from "@/api/job.js";
export default {
  data() {
    return {
      joblist: [],
      loading: false, //控制onLoad的执行
      finished: false,
      page: 1,
    };
  },
  // created () {
  //     jobGet().then(res=>{
  //         console.log(res);
  //         this.joblist = res.data.results
  //     })
  // },
  methods: {
    // onLoad首屏加载、触底都会执行
    onLoad() {
      console.log("onLoad执行了");
      // onLoad执行的时候会自动把loading改为true
      jobGet(this.page).then((res) => {
        console.log(res);
        let { results } = res.data;
        if (results.length) {
          this.joblist = [
            ...this.joblist, //原数据
            ...results, //新数据
          ];
          this.page++;
          this.loading = false; //每次网络请求结束后，需要把loading改为false，才能保证下次继续执行onLoad
        } else {
          this.finished = true; //所有数据都请求完毕
        }
      });
    },
    handleDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.job-cont {
  padding: 2rem;
}
.job-item {
  width: 34.4rem;
  height: 29.2rem;
  padding: 3.2rem;
  box-sizing: border-box;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  margin-bottom: 2rem;
  .brand {
    font-size: 2.4rem;
    img {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
    }
  }
  .fs-28 {
    margin: 3rem 0;
  }
  .loc {
    margin-bottom: 4rem;
  }
}
</style>
